<template>
  <div class="shop" ref="shopTarget">
    <div class="title">
      <h2>热门商品</h2>
    </div>
    <div
      class="demo"
      style="margin: 0 auto;padding-bottom: .5rem;"
      v-masonry
      gutter="15"
      percent-position="true"
      fit-width="true"
      ref="waterfallTarget"
    >
      <div v-masonry-tile @click="goDetail(item.id)" class="card" v-for="item in goodsData" :key="item.id">
        <div>
          <img :src="item.s_goods_photos[0].path" alt="" />
          <div class="goodsMsg">
            <div class="goodsName">
              <p>{{ item.name }}</p>
            </div>
            <div class="goodsDesc">{{ item.desc }}</div>
            <div class="price">
              <p>
                <strong>￥</strong> {{ item.price }}
                <span>库存:{{ item.stock_num }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 看不到底部的原因:
  整个瀑布流组件是定位，脱离文档流，造成父元素盒子里面没有内容撑开 如何解决:
  获取瀑布流的动态高度，赋值到父元素上shop这个div + 100的留白，就可以显示完整 -->
</template>

<script setup>
import {
  ref,
  nextTick,
  onMounted,
  defineProps,
  defineEmits,
  onUpdated,
} from "vue";
import {delayPrint} from '../../../utils/index'
import {Toast} from 'vant'
import {useRouter} from 'vue-router'
const router = useRouter()
const goDetail = (id) =>{
  router.push(`/detail/${id}`)
}
defineProps({
  goodsData: Array,
});
//数据发生改变触发的生命周期
onUpdated(() => {
//   console.log("触发了吗");
  nextTick(() => {
    //获取瀑布流的动态高度
    // console.log(waterfallTarget.value.style.height);
    let a = waterfallTarget.value.style.height.slice(0, -2);
    shopTarget.value.style.height = Number(a) + 100 + "px";
  });
});
onMounted(() => {
//   console.log("触发了吗?mounted");
  setTimeout(() => {
    //确保数据回来
    nextTick(() => {
      //获取瀑布流的动态高度
    //   console.log(waterfallTarget.value.style.height);
    });
  }, 1000);
});
//注册事件
const emits = defineEmits(["go"]);
function cb() {
//   console.log("ddd");
  const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
  console.log(scrollHeight, scrollTop, clientHeight);
  if (scrollHeight - scrollTop - 100 <= clientHeight) {
    console.log("触底了");
    // 派发一个事件到父组件中更新数据
    emits("go");
  }
}
document.addEventListener("scroll", delayPrint(300, cb));
let shopTarget = ref(null);
let waterfallTarget = ref(null);
// let itemRefs = [];
// const setItemRefs = (el, item) => {
//   itemRefs.push({
//     el,
//     item,
//   });
// };
// onMounted(() => {
//   setTimeout(() => {
//     let column = 2; //当前页面的列数
//     let array = []; // [左侧高度，右侧高度]
//     for (let i = 0; i < itemRefs.length; i++) {
//       if (i < column) {
//         itemRefs[i].el.style.top = "20px";
//         itemRefs[i].el.style.left = itemRefs[0].el.clientWidth * i + "px";
//         array.push(itemRefs[i].el.clientHeight);
//       } else {
//         let minHeight = Math.min(...array);
//         let index = array.findIndex((item) => item === minHeight);
//         itemRefs[i].el.style.top = array[index] + 25 + "px";
//         itemRefs[i].el.style.left = itemRefs[index].el.offsetLeft + "px";
//         array[index] += itemRefs[i].el.clientHeight;
//       }
//     }
//   }, 300);
// });
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  height: 2rem;
  background-color: #AD6C85;
  .title {
    margin-top: 0.16rem;
    display: inline-block;
  }
}

.shop {
  .title {
    margin: 0.14rem 0 0.14rem 0.18rem;
    h2 {
      font-size: 0.18rem;
      color: #333;
    }
  }
  .card {
    width: 43vw;
    background-color: #fff;
    padding: 0.04rem;
    img {
      width: 100%;
      display: block;
      height: auto;
    }
    .goodsMsg {
      .goodsName {
        margin: 0.1rem 0;
        p {
          font-size: 0.14rem;
          color: #333;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .goodsDesc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 0.04rem;
        color: #666;
      }
      .price {
        p {
          font-size: 0.2rem;
          color: #ff4142;
          margin: 0.03rem 0;
          span {
            font-size: 0.06rem;
            color: #999;
            margin-left: 0.3rem;
            display: inline-block;
          }
          strong {
            font-size: 0.14rem;
            margin-left: 0.04rem;
          }
        }
      }
    }
  }
}
</style>
